<template>
  <div class="block">
    <el-slider v-model="sonvalue" show-input @change="sonMethod"> </el-slider>
  </div>
</template>

<script>
  export default {
    props: {
      //子组件内部，不允许直接操作自定义属性 接收的父组件的值！
      value: {
        type: Number,
      },
    },
    //它是个内存地址，在Vue对象实例化的时候，会开辟一个空间把这个地址的值放进入
    data() {
      return {
        //方案一：设置会有一个问题，它只有一次值！
        sonvalue: this.value,
      };
    },
    //计算属性(了解)
    // computed:{
    //     sonvalue2:function(){
    //         return this.value+5;
    //     }
    // }
    //监听属性
    watch:{
        value:function(newValue,oldValue){
            // console.log(newValue,oldValue);
            //data中的sonvalue初始化以后不再改变，但是我们可以手动去修改它！
            this.sonvalue  = newValue
        }
    },
    methods:{
        //方法二： 子组件的方法
        sonMethod(){
            this.$emit("callFather",this.sonvalue);
        }
    }

};
</script>